<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
<div id="vuebox">
  <div class="container" style="margin-top: 50px">
      <div class="row">
          <div class="col-md-6">
              <form class="form-inline" role="form" style="padding-left: 250px;">
                  <div class="form-group" style="padding-left: 20px;">
                      <label>按区域查询:</label>
                      <select class="form-control" v-model="dis">
                          <option value="0">不限</option>
                          <option v-for="item in seledis.data" :value="item.id">{{item.name}}</option>
                      </select>
                  </div>
                  <div class="form-group"  style="padding-left: 20px;">
                      <button type="button" class="btn btn-primary" @click="selectEntry(1)">查询</button>
                  </div>

              </form>
              <button type="button" @click="addair">添加空气质量信息</button>
          </div>
      </div>

      <br/>
      <table class="table table-striped">
          <thead>
          <tr>
              <th>序号</th>
              <th>区域</th>
              <th>检测时间</th>
              <th>PM10数据</th>
              <th>PM2.5数据</th>
              <th>监测站</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in seleAir.data.list">
              <td>{{item.id}}</td>
              <td>{{item.districtid}}</td>
              <td>{{item.monitortime}}</td>
              <td>{{item.pm10}}</td>
              <td>{{item.pm23}}</td>
              <td>{{item.monitoringstation}}</td>

          </tr>
          </tbody>
      </table>
      <br/>
      <ul class="pagination">
          <li v-show="seleAir.data.hasPreviousPage">
              <a href="#" @click.prevent="selectEntry(seleAir.data.prePage)">&laquo;</a>
          </li>
          <li v-for="i in seleAir.data.navigatepageNums" :class="{active:seleAir.data.pageNum==i}">
              <a href="#" @click.prevent="selectEntry(i)">{{i}}</a>
          </li>
          <li v-show="seleAir.data.hasNextPage">
              <a href="#" @click.prevent="selectEntry(seleAir.data.nextPage)">&raquo;</a>
          </li>
      </ul>
  </div>

    <!--//添加图书模态框-->
    <!--模态框-->
    <div class="modal" id="mymodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button @click="hideModal" class="close" type="button">&times;</button>
                    <div class="modal-title">添加空气质量</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group" style="padding-left: 20px;">
                            <label>监测区域:</label>
                            <select class="form-control" v-model="new_entry.districtid">
                                <option value="0">请选择</option>
                                <option v-for="item in categoryList.data" :value="item.id">{{item.name}}</option>
                            </select>

                        </div>

                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">检测日期</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.monitortime" id="title" type="text" class="form-control" placeholder="请输入图书名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="summary" class="col-sm-2 control-label">pm10值</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.pm10" id="summary" type="text" class="form-control" placeholder="请输入图书摘要"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="uploaduser" class="col-sm-2 control-label">pm2.5值</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.pm23" id="uploaduser" type="text" class="form-control" placeholder="请输入上传人">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="createdate" class="col-sm-2 control-label">监测站</label>
                            <div class="col-sm-10">
                                <input v-model="new_entry.monitoringstation" id="createdate" type="text" class="form-control" placeholder="请输入上传时间">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" @click="hideModal()">关闭</button>
                    <button class="btn btn-primary" @click="saveBook">保存</button>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
            seledis:{},
            seleAir:{},
            dis:"0",
                categoryList:{},
                districtid:"0",
                new_entry:{
                    districtid:'0',monitortime:'',pm10:'',pm23:'',monitoringstation:''
                },
                add:{},
            },
            methods:{
                selectEntry:function (cid) {
                    axios.get("/seleAir",{params:{pageNum:cid,districtid:this.dis}}).then(res=>{this.seleAir=res.data})
                },
                addair:function () {
                  $("#mymodal").modal('show');
                },
                hideModal:function () {
                    $("#mymodal").modal('hide');
                },
                saveBook:function(){
                    axios.post("/addAir",this.new_entry).then(res=>{
                        this.add=res.data;
                        if(this.add.result=="SUCCESS"){
                            this.selectEntry(1);
                        }else {
                            alert(this.add.message)
                        }
                    })
                    $("#mymodal").modal('hide');
                }
            },
            mounted(){
                axios.get("/seleDis").then(res=>{this.seledis=res.data})
                this.selectEntry(1),
                    axios.get("/seleDis").then(res=>{
                        this.categoryList=res.data;
                    })
            }
    })
</script>
</html>